<template>
  <div class="container transparent mb-15">
    <!-- 下单类型 -->
    <ul class="type-list flex mb-10">
      <template v-for="(v, i) in types" :key="i">
        <li
          class="type-list__item click"
          :class="typeIndex === i ? 'active' : ''"
          @click="typeIndex = i"
        >
          {{ v.name }}
        </li>
      </template>
    </ul>

    <!-- 下单 -->
    <div class="flex flex-cc mb-10">
      <van-field
        class="flex-1 mr-10"
        type="digit"
        :placeholder="$t('请输入下注金额')"
        @input="onAmountInput"
        v-model="amount"
      ></van-field>
      <div class="btn click flex-fs-0" @click="createOrder">
        {{ $t('下单') }}
      </div>
    </div>

    <!-- 规则 -->
    <div class="box bcl-white">
      <div class="fz-17 mb-10">{{ $t('规则') }}：</div>
      <div class="fz-12">
        {{ $t('规则1') }}<br />
        {{ $t('规则2') }}<br />
        {{ $t('规则3') }}<br />
      </div>
    </div>
  </div>

  <!-- Tab切换 -->
  <ul class="tab-list flex mb-15">
    <li
      class="tab-list__item"
      v-for="(v, i) in tabs1"
      :key="i"
      :class="tabIndex === i ? 'active' : 'click'"
      @click="tabIndex = i"
    >
      {{ v }}
    </li>
  </ul>

  <!-- Tab切换 -->
  <ul class="tab-list flex mb-15">
    <li
      class="tab-list__item"
      v-for="(v, i) in tabs2"
      :key="i"
      :class="tabIndex === i + 2 ? 'active' : 'click'"
      @click="
        () => {
          if (i === 1) {
            showToast($t('暂未开放'))
          } else {
            tabIndex = i + 2
          }
        }
      "
    >
      {{ v }}
    </li>
  </ul>

  <!-- 下单明细 -->
  <div class="mb-15" v-if="tabIndex === 0">
    <play1-record></play1-record>
  </div>

  <!-- 市场 -->
  <div class="mb-15" v-else-if="tabIndex === 1">
    <play1-market></play1-market>
  </div>

  <!-- 活动 -->
  <div class="mb-15" v-else-if="tabIndex === 2">
    <play1-act></play1-act>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useStore } from '@/store/index'
import { showToast, showLoading } from 'js/utils'
import mitt from 'js/mitt'
import cosmo from 'cosmo-wallet-tool'
import play1Record from './play_1_record.vue'
import play1Market from './play_1_market.vue'
import play1Act from './play_1_act.vue'

const store = useStore()
const config = computed(() => store.config)
const amount = ref('')
const types = ref([])
const typeIndex = ref(0)

const tabs1 = ref([t('下单明细'), t('市场')])
const tabs2 = ref([t('活动'), t('PC购物')])
const tabIndex = ref(0)

watch(
  () => config.value,
  () => {
    const { bigOrSmallStatus = false, singleOrDoubleStatus = false } =
      config.value

    types.value = []

    if (bigOrSmallStatus) {
      types.value = [
        ...types.value,
        {
          id: 'order-big',
          name: t('大'),
        },
        {
          id: 'order-small',
          name: t('小'),
        },
      ]
    }

    if (singleOrDoubleStatus) {
      types.value = [
        ...types.value,
        {
          id: 'order-single',
          name: t('单'),
        },
        {
          id: 'order-double',
          name: t('双'),
        },
      ]
    }
  }
)

// 下单
async function createOrder() {
  try {
    const isWallet = await cosmo.isWallet
    const isChrome = await cosmo.isChrome
    const memo = types.value[typeIndex.value].id

    const { minOrderAmount, maxOrderAmount } = config.value

    if (!amount.value) {
      return showToast(t('请输入下注金额'))
    }

    if (Number(amount.value) <= 0) {
      return showToast(t('下注金额不能为零'))
    }

    console.log(userAmount < amount.value)
    if (Number(userAmount) < Number(amount.value)) {
      return showToast(t('余额不足'))
    }

    if (Number(amount.value) < Number(minOrderAmount)) {
      return showToast(`${t('最小下注金额为')}：${minOrderAmount}`)
    }

    if (Number(amount.value) > Number(maxOrderAmount)) {
      return showToast(`${t('最大下注金额为')}：${maxOrderAmount}`)
    }

    // 判断类型启停状态

    // 下单参数
    const params = {
      toAddress: window.toAddress,
      volume: amount.value,
      fee: '2000',
      scale: 6,
      denom: 'uplugcn',
      memo,
    }

    params.volume = params.volume.toString()

    const loading = showLoading()

    setTimeout(() => {
      loading && loading.close()
    }, 1000 * 10)

    try {
      let result = null

      if (isWallet) {
        result = await cosmo.sendTransferBaseCoin(params)
      } else if (isChrome) {
        result = await cosmo.chromeTool.sendTransferBaseCoin(
          params.toAddress,
          params.volume,
          params.memo
        )
      }

      if (result) {
        amount.value = ''
        mitt.emit('refresh')
        showToast(t('操作成功'))
      }
    } catch (err) {
      console.log(err)

      if (err && typeof err === 'string' && err.includes('error')) {
        showToast(t('密码错误'))
      } else {
        showToast(t('操作失败'))
      }
    }
  } catch (err) {
    console.log(err)
  }
}

// 最大、最小值限制
function onAmountInput() {
  const { maxOrderAmount } = config.value

  if (amount.value !== '' && maxOrderAmount) {
    if (amount.value >= maxOrderAmount) {
      amount.value = maxOrderAmount
    }
  }
}
</script>

<style lang="scss" scoped>
.type-list {
  &__item {
    width: 70px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 14px 0 14px 14px;
    border: 1px solid var(--color-primary);
    box-shadow: 0 0 4px 2px rgba($color: #b4cbf9, $alpha: 1) inset;
    background-color: var(--color-white);

    &:not(:last-child) {
      margin-right: 12px;
    }

    &.active {
      background-color: var(--color-primary);
      box-shadow: none;
      color: var(--color-white);
    }
  }
}

.tab-list {
  border-radius: 100px;
  overflow: hidden;
  background-color: rgba($color: white, $alpha: 0.4);
  box-shadow: 0 0 4px 2px rgba($color: #b4cbf9, $alpha: 1) inset;

  &__item {
    width: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 100px;

    &.active {
      background-color: var(--color-white);
      box-shadow: 0 0 4px 2px rgba($color: #b4cbf9, $alpha: 1) inset;
    }
  }
}
</style>
